<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { EffectFade, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/effect-fade";
const modules = [Autoplay, EffectFade];
const activeIndex = ref(0);
const mySwiper = ref(null);
const { data } = await useFetch("/api/downCenter");
const downList = data.value.data;
const onSlideChange = (item) => {
  activeIndex.value = item.realIndex;
};
const onSwiper = (swiperInstance) => {
  mySwiper.value = swiperInstance;
};
const changeSlide = (index) => {
  mySwiper.value.slideToLoop(index);
};
</script>
<template>
  <div>
    <swiper
      ref="mySwiper"
      :modules="modules"
      :slides-per-view="1"
      loop
      :autoplay="{
        delay: 5000,
        disableOnInteraction: false,
      }"
      effect="fade"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="(item, index) in downList" :key="index">
        <div
          :style="{ backgroundImage: 'url(' + item.url + ')' }"
          class="w-[100vw] h-[100vh] relative overflow-hidden bg-center bg-cover"
        ></div>
      </swiper-slide>
      <div
        class="w-[100vw] h-[100vh] absolute left-0 top-0 z-[999] bg-[#000] bg-opacity-80 flex items-center justify-center"
      >
        <div class="space-y-10 text-center">
          <div class="font-bold text-[28px] sm:text-[40px]">
            START云游戏，多端畅享
          </div>
          <div class="text-[18px] sm:text-[24px] opacity-60">
            {{ downList[activeIndex].subTitle }}
          </div>
          <div class="grid grid-cols-2 sm:grid-cols-4 gap-14 pt-10">
            <div
              v-for="(item, index) in downList"
              :key="index"
              @click="changeSlide(index)"
              class="cursor-pointer space-y-4"
            >
              <div class="text-[20px]">{{ item.name }}</div>
              <div
                class="w-[120px] h-[40px] mx-auto bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-blue-500 hover:to-cyan-500 leading-[40px] rounded-[100px] cursor-pointer"
              >
                {{ item.btn }}
              </div>
              <div class="space-x-2 opacity-60 mt-2">
                <span>{{ item.version }}</span>
                <span>{{ item.date }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </swiper>
  </div>
</template>
<style scoped lang="scss"></style>
